<template>
  <div class="dialog-overlay">
    <div class="dialog">
      <!-- 左侧面板：本地收藏情况 -->
      <div class="left-panel">
        <h3>本地收藏情况</h3>

        <!-- 文件夹选择和输入框 -->
        <div class="name-input-container" style="display: flex; align-items: center; gap: 10px">
          <label for="folderName" style="font-size: 16px">文件夹名称</label>
          <div class="input-group" style="position: relative; display: flex; align-items: center; flex: 1">
            <span id="folderSelect" style="
                  padding-left: 45px;
                  padding-right: 10px;
                  border: 2px solid #0fb264;
                  font-size: 20px;
                  height: 40px;
                  border-radius: 3px;
                  background-color: #f9f9f9;
                  color: #333;
                  margin-right: 10px;
                  flex: 1;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  transition: all 0.3s ease;
              ">
              <option>
                {{ folders.name }}
              </option>
            </span>
            <span class="folder-icon" style="position: absolute; left: 15px">
              <i class="fas fa-folder" style="font-size: 20px; color: #ffcc00"></i>
            </span>
          </div>
        </div>

        <!-- 展示当前选择的文件夹内容 -->
        <div class="folder-content">
          <div v-if="folders.bookmarks.length === 0" class="empty-folder-message">
            <p>此文件夹暂无数据展示。</p>
          </div>
          <ul>
            <li v-for="(bookmark, idx) in folders.bookmarks" :key="idx">
              <a :href="bookmark.url" target="_blank" style="text-decoration: none; color: inherit;"
                :title="bookmark.url">
                <span>{{ bookmark.favUrlName }}</span>
              </a>
            </li>
          </ul>
        </div>

        <!-- 一键整理按钮 -->
        <div class="button-container">
          <button @click="organizeBookmarks" class="organize-btn">
            <!-- <span v-if="isOrganizing">AI整理中...</span> -->
            <span>一键AI整理</span>
          </button>
          <span class="button-spacer"></span>
          <button @click="viewDealRes" class="organize-btn">
            <!-- <span v-if="isOrganizing">AI整理中...</span> -->
            <span>查看处理结果</span>
          </button>
        </div>
      </div>

      <!-- 右侧面板：分类后的文件夹 -->
      <div class="right-panel">
        <h3>AI智能整理</h3>
        <div class="auto-folder">
          <div v-if="disCordTask?.status == '整理成功'">
            <div v-for="(res, index) in disCordTask.result" :key="index">
              <div class="folder-name-container">
                <!-- 在文件夹名称前加图标 -->
                <span class="folder-icon">
                  <i class="fas fa-folder" style="font-size: 16px; color: #ffcc00"></i>
                </span>
                <span>
                  <strong>{{ res.favoriteName }}</strong>
                </span>
              </div>
              <ul>
                <li v-for="(favUrl, idx) in res.favUrls" :key="idx">
                  <span>{{ favUrl.favUrlName }}</span>
                </li>
              </ul>
              <!-- <div class="empty-folder-message" v-if="folder.bookmarks.length === 0">
                <p>此文件夹暂无数据展示。</p>
              </div>
              <div v-else>
                <ul>
                  <li v-for="(favUrl, idx) in res.favUrls" :key="idx">
                    <span>{{ favUrl.favUrlName }}</span>
                  </li>
                </ul>
              </div> -->
            </div>
          </div>
          <div v-else>
            {{ tidyString }}
            您的任务{{ disCordTask.status }}
          </div>

          <!-- <div  v-for="(folder, index) in generatedFolders" :key="index">
            <p class="folder-name-container">
              在文件夹名称前加图标
              <span class="folder-icon">
                <i class="fas fa-folder" style="font-size: 16px; color: #ffcc00"></i>
              </span>
              <strong>{{ folder.name }}</strong>
            </p>
            <div class="empty-folder-message" v-if="folder.bookmarks.length === 0">
              <p>此文件夹暂无数据展示。</p>
            </div>
            <div v-else>
              <ul>
                <li v-for="(bookmark, idx) in folder.bookmarks" :key="idx">
                  <span>{{ bookmark.name }}</span>
                </li>
              </ul>
            </div>
          </div> -->
        </div>

        <div v-if="disCordTask?.status == '整理成功'" class="buttons">
          <button @click="confirmSorting" class="confirm-btn">点击确定</button>
        </div>
      </div>
      <!-- 关闭弹窗按钮，右上角的 × -->
    </div>
  </div>
</template>

<script setup lang='ts'>


interface Bookmark {
  favUrlId: string;
  favUrlName: string;
  url: string;
}

// 定义文件夹的类型
interface Folder {
  name: string;
  bookmarks: Bookmark[];
}
const disCordTask = ref<PreData>({
  status: '',
  endTime: '',
  favUrlIds: null,
  result: null,
  startTime: ''
})
const tidyString = ref('')
const folders = ref<Folder>(
  {
    name: "其他",
    bookmarks: []
  }
);
favApi.getDisorderedUrls().then(
  (res) => {
    folders.value.bookmarks = (res as unknown as { favUrls: Bookmark[] }).favUrls
  }
)

favApi.preViewTask().then(
  (res) => {
    disCordTask.value = res as unknown as PreData
    console.log(disCordTask.value);

  })

// 一键AI整理
const organizeBookmarks = () => {
  favApi.tidy().then((res) => {
    if (typeof res === 'string') {
      showMsg(res)
    } else {
      showMsg((res as unknown as { res: string }).res)
    }
  }).catch(
    (err) => {
      showErrMsg("未知错误，请重试")
    }
  )
}

const viewDealRes = () => [
  favApi.preViewTask().then(
    (res) => {
      disCordTask.value = res as unknown as PreData
      showMsg("您的任务" + disCordTask.value.status)
    })
]

// 确认整理并更新左侧面板
const confirmSorting = () => {
  // 更新左侧的“本地收藏情况”文件夹
  favApi.acceptTask().then((res) => {
    if ((res as unknown as { res: boolean }).res) {
      favApi.getDisorderedUrls().then(
        (res) => {
          folders.value.bookmarks = (res as unknown as { favUrls: Bookmark[] }).favUrls
          disCordTask.value.status = ""
        }
      )
    }
  })
}

</script>

<script lang="ts">
import { ref } from 'vue'
import * as favApi from '@/api/favorite/favorite'
import ApiClient from '@/api/basic';
import { showErrMsg, showMsg } from '@/utils/message';
import { PreData } from '@/type/favorite/favorite';
export default {
  name: 'EmptyTableDialog',
}
</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.dialog {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 60%;
  /* 可根据需要调整 */
  max-height: 80%;
  /* 设置最大高度 */
  display: flex;
  flex-direction: row;
  gap: 20px;
  height: 70%;
  /* 保证对话框高度填满父容器 */
}

/* 左侧面板 */
.left-panel {
  width: 50%;
  /* 左侧面板占 50% 宽度 */
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
  height: 100%;
  /* 保证左右面板高度一致 */
  padding: 20px;
  /* 内边距设为 20px，确保内容与边框之间有间隙 */
}

/* 右侧面板 */
.right-panel {
  width: 50%;
  /* 右侧面板占 50% 宽度 */
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  height: 100%;
  /* 保证左右面板高度一致 */
  padding: 20px;
  /* 内边距设为 20px，确保内容与边框之间有间隙 */
}

.name-input-container {
  margin-bottom: 20px;
}

.input-group {
  position: relative;
}

.folder-name-container {
  display: flex;
  /* 使用flex布局 */
  align-items: center;
  /* 垂直居中对齐 */
  text-align: left;
  /* 左对齐文本 */
}

/* 文件夹名称前图标的样式 */
.folder-icon {
  font-size: 16px;
  /* 图标大小 */
  color: #ffcc00;
  /* 图标颜色 */
  margin-right: 8px;
  /* 图标与文本之间的间距 */
  vertical-align: middle;
  /* 使图标与文本垂直对齐 */
}

strong {
  text-align: left;
  /* 确保文字本身左对齐 */
  display: inline-block;
  /* 强制文字占据一行 */
  margin-left: 5px;
  /* 可以稍微增加文字与图标之间的间距 */
}

.organize-btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  width: 60%;
  cursor: pointer;

  bottom: 20px;
  /* 距离页面底部 20px */
}

.organize-btn:hover {
  background-color: #0e8b4e;
}

.organize-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.confirm-btn {
  padding: 10px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.confirm-btn:hover {
  background-color: #218838;
}

.empty-folder-message {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #777;
  font-size: 18px;
  font-style: italic;
}

.auto-folder {
  overflow-y: auto;
  /* 使内容超过时可滚动 */
}

.button-spacer {
  margin: 0 10px;
  /* 为间隔添加外边距 */
}


/* 用于包裹图标和书签文本的容器 */
.bookmark-item {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 图标与文本之间的间距 */
}

/* 文件夹图标样式 */
.bookmark-item .folder-icon {
  position: relative;
  left: 0;
  /* 保证图标在文本前面 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* 书签文本的样式 */
.bookmark-item span {
  font-size: 14px;
  color: #333;
}

.button-container {
  display: flex;
  justify-content: center;
  /* 水平居中按钮 */
  margin-top: auto;
  /* 将按钮推到容器底部 */
}

.folder-content {
  overflow-y: auto;
  /* 允许垂直方向滚动 */
  padding-right: 10px;
  /* 为滚动条留出空间 */
}
</style>